<script setup>
import { ref } from 'vue'
const title = ref('我是列表')
</script>

<template>
  <div class="my-box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</template>

<style scoped lang="scss">
.my-box {
  width: 500px;
  min-height: 500px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 2fr 2fr 2fr;
  grid-auto-flow: row;
  gap: 20px;
  align-items: center;
  justify-items: center;
  div:first-child {
    order: 2;
    background-color: red;
    flex-basis: 120px;
  }
  div {
    background-color: red;
    width: 100%;
    height: 100%;
  }
}
</style>
